import 'package:flutter/material.dart';

import 'package:ddlmanager/backend/app_state.dart';
import 'package:provider/provider.dart';

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  late dynamic appState;
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    appState = context.watch<AppState>();
    return Scaffold(
      body: ListView(
        children: [
          Container(
            padding: const EdgeInsets.all(12),
            child: Text(
              '主题',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w500,
                color: Theme.of(context).colorScheme.secondary,
              ),
            ),
          ),

          SizedBox(
            height: 80,
            child: Scrollbar(
              thumbVisibility: true,
              trackVisibility: true,
              interactive: true,
              controller: _scrollController,
              child: ListView.builder(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                controller: _scrollController,
                scrollDirection: Axis.horizontal,
                itemCount: Colors.primaries.length,
                itemBuilder: (context, index) {
                  final colorScheme = ColorScheme.fromSeed(
                    seedColor: Colors.primaries[index],
                  );
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 4),
                    child: InkWell(
                      focusColor: Colors.transparent,
                      hoverColor: Colors.transparent,
                      splashColor: Colors.transparent,
                      highlightColor: Colors.transparent,
                      onTap: () {
                        AppState().setThemeCode(index);
                      },
                      borderRadius: BorderRadius.circular(25),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          SizedBox(
                            width: 50,
                            height: 50,
                            child: ClipOval(
                              child: Column(
                                children: [
                                  Expanded(
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Container(
                                            color: colorScheme.primaryContainer,
                                          ),
                                        ),
                                        Expanded(
                                          child: Container(
                                            color:
                                                colorScheme.tertiaryContainer,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    height: 25,
                                    color: Colors.primaries[index].shade200,
                                  ),
                                ],
                              ),
                            ),
                          ),
                          if (AppState().settings.themeCode == index)
                            Icon(
                              Icons.check,
                              color: colorScheme.onSurface,
                              size: 20,
                            ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          SizedBox(height: 20),
          SwitchListTile(
            title: Text('深色模式'),
            value: AppState().settings.themeMode == ThemeMode.dark,
            onChanged: (bool value) {
              if (value) {
                AppState().setThemeMode(ThemeMode.dark);
              } else {
                AppState().setThemeMode(ThemeMode.light);
              }
            },
          ),
        ],
      ),
    );
  }
}
